<template>
  <view :class="['app-link', className]" @click="handleNavigation">
    <slot></slot>
  </view>
</template>

<script setup>
import { defineProps, defineExpose } from 'vue';

const props = defineProps({
  // 目标页面的URL
  to: {
    type: String,
    required: true
  },
  // 导航方式: navigate, redirect, switchTab, reLaunch
  mode: {
    type: String,
    default: 'navigate'
  },
  // 自定义类名
  className: {
    type: String,
    default: ''
  }
});

// 处理导航
const handleNavigation = () => {
  const url = props.to;
  
  // 直接加载目标页面的组件
  try {
    console.log('正在导航到页面:', url);
    const pagePath = url.startsWith('/') ? url.substring(1) : url;
    
    // // 如果是在H5环境中，使用location.hash进行导航
    // if (typeof window !== 'undefined') {
    //   window.location.href = '#/' + pagePath;
    //   return;
    // }
    
    // 如果不是H5环境，尝试使用uni API（可能会失败）
    switch (props.mode) {
      case 'navigate':
        uni.navigateTo({ url });
        break;
      case 'redirect':
        uni.redirectTo({ url });
        break;
      case 'switchTab':
        uni.switchTab({ url });
        break;
      case 'reLaunch':
        uni.reLaunch({ url });
        break;
      default:
        uni.navigateTo({ url });
    }
  } catch (e) {
    console.error('导航失败:', e);
  }
};

defineExpose({
  create() {
    // 返回包含所有方法的对象
    return {
      method1,
      method2,
      // ...
    };
  }
});
</script>

<style>
.app-link {
  cursor: pointer;
}
</style> 